<template>
  <div class="app-container">

    <el-form
      ref="form"
      v-loading="loading"
      :model="model"
      label-width="120px"
    >

      <el-form-item hidden="hidden" disabled="disabled" label="id">
        <el-input v-model="model.id" disabled="disabled" />
      </el-form-item>

      <el-form-item label="角色名">
        <el-input v-model="model.nameZh" />
      </el-form-item>

      <el-form-item label="标识">
        <el-input v-model="model.name" />
      </el-form-item>

      <el-form-item label="拥有权限">
        <div v-for="(permission ) in model.permissionList" :key="permission.id" class="text item">
          <el-button type="primary" disabled size="mini">{{ permission.name }}</el-button>
        </div>
        <el-button type="primary" @click="selectPermission">编辑</el-button>
      </el-form-item>

      <el-form-item label="拥有菜单">
        <div v-for="(menu ) in model.menuList" :key="menu.id" class="text item">
          <el-button type="primary" disabled size="mini">{{ menu.name }}</el-button>
        </div>
        <el-button type="primary" @click="selectMenu">编辑</el-button>
      </el-form-item>

      <el-form-item v-show="model.createTime" label="创建时间">
        <el-col :span="24">
          <el-date-picker v-model="model.createTime" disabled="disabled" type="datetime" placeholder="请选择一个时间" style="width: 100%;" />
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{ action }}</el-button>
        <el-button type="info" @click="back">返回</el-button>
      </el-form-item>

    </el-form>

    <el-dialog
      title="选择权限"
      :visible.sync="showSelectPermission"
      width="40%"
    >
      <permissionSelect />

    </el-dialog>

    <el-dialog
      title="选择菜单"
      :visible.sync="showSelectMenu"
      width="40%"
    >
      <menuSelect />

    </el-dialog>

  </div>
</template>

<script>

import { getOne, createOne, update } from '@/api/system/role'

import { findByRoleId as findPermissionByRoleId } from '@/api/system/permission'
import { findByRoleId as findMenuByRoleId } from '@/api/system/menu'

import permissionSelect from '@/views/system/permission/select'
import menuSelect from '@/views/system/menu/select'
import Bus from '@/utils/bus'

export default {
  components: { permissionSelect, menuSelect },
  data() {
    return {
      loading: true,
      showSelectPermission: false,
      showSelectMenu: false,
      action: '创建',
      model: {}
    }
  },
  async created() {
    const id = this.$route.params.id
    if (!id) {
      this.loading = false
      return
    }
    this.action = '修改'
    const { data } = await getOne(id)
    const permissionResp = await findPermissionByRoleId(id)
    const menuResp = await findMenuByRoleId(id)

    data.permissionList = permissionResp.data
    data.menuList = menuResp.data
    this.model = data
    this.loading = false
  }, mounted() {
    Bus.$on('closePermission', () => {
      this.closePermission()
    })
    Bus.$on('closeMenu', () => {
      this.closeMenu()
    })
  },
  methods: {

    async onSubmit() {
      let res
      this.model.permissionIds = []
      this.model.permissionList.forEach(permission => {
        this.model.permissionIds.push(permission.id)
      })
      if (this.model.id) {
        res = await update(this.model)
      } else {
        res = await createOne(this.model)
      }
      if (res.code === 0) {
        this.$message.success('操作成功')
        this.back()
      }
    },
    back() {
      this.$router.go(-1)
    },
    selectPermission() {
      this.showPermission()
      this.$store.state.role = this.model
    },
    showPermission() {
      this.showSelectPermission = true
    },
    closePermission() {
      this.model.permissionIds = []
      this.$store.state.role.permissionList.forEach(element => this.model.permissionIds.push(element.id))
      this.showSelectPermission = false
    },
    selectMenu() {
      this.showMenu()
      this.$store.state.role = this.model
    },
    showMenu() {
      this.showSelectMenu = true
    },
    closeMenu() {
      this.model.menuIds = []
      this.$store.state.role.menuList.forEach(element => this.model.menuIds.push(element.id))
      this.showSelectMenu = false
    }
  }
}

</script>

<style scoped>
.line{
  text-align: center;
}
</style>
